<template>
  <div class="flex-1">
    <plate-card class="h-full" title="作业执行统计">
      <div class="px-2 py-4 h-full">
        <v-charts :autoresize="true" :option="visitorOption" style="height: 100%" />
      </div>
    </plate-card>
  </div>
</template>

<script lang="ts" setup>
  import PlateCard from '@/components/plate-card.vue'
  import { reactive, ref } from 'vue'
  import CardHeader from '@/assets/vue.svg'
  import vCharts from 'vue-echarts'
  import { graphic } from 'echarts'

  const visitorOption = ref({
    grid: {
      top: '1%',
      left: '3%',
      right: '4%',
      bottom: '1%',
      containLabel: true
    },
    tooltip: {},
    xAxis: {
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisLine: {
        show: true // 隐藏 x 轴线
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#27433D',
          width: 1,
          type: 'dashed'
        }
      }
    },
    yAxis: {
      axisTick: {
        show: false
      },
      data: ['机械插秧', '育秧作业', '耕地作业', '收割作业', '植保作业', '人工直播', '施肥作业'],
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#27433D',
          width: 1,
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '数量',
        type: 'bar',
        data: [30, 50, 100, 350, 200, 250, 300],
        label: {
          show: true,
          position: 'right',
          color: '#E9E405',
          fontSize: 16
        },
        barWidth: 20,
        itemStyle: {
          height: 16,
          color: new graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#0F3D68' },
            { offset: 1, color: '#06EDF0' }
          ])
        }
      }
    ]
  })
</script>

<style scoped></style>
